<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="./css/markdown-style.css">
    <link rel="stylesheet" href="./css/default.min.css">

    <script src="./js/marked.js"></script>
    <script src="./js/highlight.min.js"></script>
    <style>
        header{
            background-image: url(./img/a.jpg);
        }

        
        @media (max-width:420px) {
            main{
                width: 100%;
                padding: 10px;
            }
        }
    </style>
    <title>About</title>
</head>

<body>
    <header>
        <nav class="nav-top top-show">
            <div id="logo">
                <a href="./index.html">
                    暗天使
                </a>
            </div>
            <div class="menu">
                <i class="iconfont icon-menu"></i>
            </div>
            <div class="nav">
                <a href="index.html" class="item">首页</a>
                <a href="./list.html" class="item">文章</a>
                <a href="./archives.html" class="item">足迹</a>
                <a href="./links.html" class="item">友链</a>
                <a href="about.html" class="item">关于</a>
            </div>
            <div class="search">
                <a href="#">
                    <i class="iconfont icon-31sousuo"></i>
                    <!-- <img src="./img/icon/搜索_填充.png" alt=""> -->
                </a>
                <div class="search-box ">
                    <div class="quit">
                        <a href="#">
                            关闭
                        </a>
                    </div>
                    <form action="./search.html">
                        <input required type="text" name="q" id="" placeholder="想要找点什么呢？">
                        <input type="submit" value="搜索">
                    </form>
                </div>
            </div>
        </nav>
        <div class="container-flex">
            <div class="box">
                <div class="h1">About</div>
            </div>
        </div>
    </header>

    <main class="container">
        <article id="article">
        </article>

        <footer>
            footer Lorem ipsum, dolor sit amet consectetur adipisicing elit. Libero, distinctio commodi?
            Voluptatem
            asperiores dicta, excepturi corporis r molestiae iste veniam tempore sint odio,
            <br>
            corrupti ipsa. Harum, inventore.
        </footer>
        <div id="cd-top">
            <img src="./img/f.png" alt="">
        </div>
    </main>

    <script src="./js/main.js"></script>
    <script>
        let xhr = new XMLHttpRequest()
        xhr.open('get', './about.md', false)
        xhr.send(null)

        let content = xhr.responseText
        let article = document.getElementById('article')
        article.innerHTML += marked.parse(content);
        console.log(marked.parse(content));
        hljs.highlightAll();
    </script>
</body>

</html>